<!-- 商城 - xxx组件 -->
<template>
	<view class="vk-mall-grid-btn" v-if="data.list && data.list.length > 0">
		<u-grid :col="data.col" :border="false" class="grid-view">
			<u-grid-item v-for="(item,index) in data.list" :key="index" @click="click(item)">
				<u-badge v-if="item.num > 0" :count="item.num" :offset="[20, 20]" ></u-badge>
				<image v-if="item.iconType === 'image'" :src="item.image" mode="aspectFill" class="image-icon" :style="'width: '+(data.iconSize+44)+'rpx;height:'+(data.iconSize+44)+'rpx;'"></image>
				<view v-else class="icon-box" :style="'background-color: ' + item.backgroundColor + ';width:'+(data.iconSize+44)+'rpx;height:'+(data.iconSize+44)+'rpx'">
					<u-icon :name="item.icon" :size="data.iconSize" :color="item.color"></u-icon>
				</view>
				<view class="grid-text" :style="'margin-top: 12rpx;'">{{ item.title }}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
export default {
	name: "vk-mall-grid-btn",
	props: {
		localdata:{
			Type:Object
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			data:{
				col:3,
				list:[],
				iconSize:46
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		click(item){
			this.$emit("click",item)
		}
	},
	// 监听器
	watch:{
		localdata:{
			deep: true,
			immediate: true,
			handler(newVal, oldVal){
				Object.assign(this.data, newVal);
			}
		},
	},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
	.icon-box{
		border: 0px solid #007aff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	.grid-text{
		font-size: 24rpx;
	}
	.image-icon{
		border-radius: 50%;
	}
</style>
